<script setup>
	import {
		DIFF_ISFREEZE
	} from '@/config/index'
	import {
		useFreeze
	} from '@/hook/useFreeze'
	const {
		_isFreeze
	} = useFreeze()
	import {
		_t18
	} from '@/utils/public'
	import {
		pledgeSubmit
	} from '@/api/pledge/index'
	import {
		priceFormat
	} from '@/utils/decimal.js'
	import {
		useUserStore
	} from '@/store/user/index'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		showToast
	} from 'vant'
	import {
		useToast
	} from '@/hook/useToast'
	const {
		_toast
	} = useToast()

	const route = useRoute()
	const router = useRouter()
	const data = reactive(JSON.parse(decodeURI(route.query.data)))
	/**
	 * 账户信息
	 */
	const userStore = useUserStore()
	const {
		asset
	} = storeToRefs(userStore)
	const amount = computed(() => {
		// let data = 999
		let data = asset.value.filter((item, index) => {
			return item.type == '1' && item.symbol == 'usdt'
		})[0].availableAmount
		return data
	})
	const maxAmount = ref('')
	let maxNum = () => {
		maxAmount.value = amount.value
	}
	const submitForm = () => {
		let params = {
			planId: data.id,
			amount: maxAmount.value
		}
		if (maxAmount.value == '' || maxAmount.value > data.limitMax || maxAmount.value < data.limitMin) {
			// showToast('购买金额有误')
			_toast('pledge_buy_error')
			return
		}
		pledgeSubmit(params).then((res) => {
			if (res.code == '200') {
				// showToast(res.msg)购买成功
				_toast('Purchase_successful')
				setTimeout(() => {
					router.push('/pledge/pledgeOrder')
				}, 500)
			} else {
				showToast(res.msg)
			}
		})
	}
	const submit = () => {
		if (DIFF_ISFREEZE.includes(__config._APP_ENV)) {
			if (_isFreeze(DIFF_ISFREEZE)) {
				submitForm()
			}
		} else {
			submitForm()
		}
	}
</script>
<template>
	<view class="container">
		<HeaderBar :currentName="_t18('host.detail')"></HeaderBar>
		<!-- 申购金额 -->
		<view class="content1">
			<view class="jine">
				<!-- 申购金额存入资金 -->
				<view>
					<view>{{ _t18('pledge_Subscription_amount') }} <span>(USDT)</span></view>
					<p @click="$router.push('/recharge')">{{ _t18('pledge_deposit_funds') }}</p>
				</view>
				<view class="ipt">
					<input v-model="maxAmount" type="number"
						:placeholder="`${_t18('pledge_purchasing_price', ['aams'])}`" class="ff-num" />
					<p @click="maxNum()">{{ _t18('pledge_maximum') }}</p>
				</view>
			</view>
			<view class="shouyi">
				<view>
					<p>{{ _t18('pledge_quota') }}</p>
					<p class="ff-num">{{ data.limitMin }}~{{ data.limitMax }}</p>
				</view>
				<!-- 日收益率 -->
				<view>
					<p>{{ _t18('host_dailyrateof_return') }}</p>
					<p class="ff-num">{{ data.minOdds }}%~{{ data.maxOdds }}%</p>
				</view>
				<!-- 周期(天) -->
				<view>
					<p>{{ _t18('pledge_cycle') }}({{ _t18('pledge_day') }})</p>
					<p class="ff-num">{{ data.days }}</p>
				</view>
			</view>
		</view>
		<!-- 信息 -->
		<view class="content2">
			<view>
				<!-- 可用余额 -->
				<view>
					<view class="left">{{ _t18('pledge_Available_Balance') }}</view>
					<view class="right ff-num">{{ priceFormat(amount) }} USDT</view>
				</view>
				<!-- 可购次数 -->
				<view>
					<view class="left">{{ _t18('pledge_Available_times') }}</view>
					<view class="right ff-num" v-if="['dev'].includes(_getConfig('_APP_ENV'))">
						{{ `${data.buyPurchase}/${data.timeLimit}` }}</view>
					<view class="right ff-num" v-else>{{ `${data.timeLimit}` }}</view>
				</view>
				<!-- <view>
	      <view class="left">总年化率</view>
	      <view class="right ff-num">0.00%-0.00%</view>
	    </view> -->
			</view>
			<!-- <view class="btn" @click="$router.push('/pledge/pledgeOrder')">确定</view> -->
			<view class="btn" @click="submit">{{ _t18('btnConfirm', ['bitmake']) }}</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	* {
		font-size: 14px;
		color: var(--ex-default-font-color);
	}

	.container {
		padding: 15px;
		display: flex;
		flex-direction: column;
	}

	.content1 {
		border-bottom: 1px solid var(--ex-border-color);
		padding: 20px 15px 30px;

		.jine {
			&>view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					color: var(--ex-passive-font-color);
				}

				p {
					color: var(--ex-font-color9);
				}
			}

			.ipt {
				border: 1px solid var(--ex-border-color1);
				border-radius: 3px 3px 3px 3px;
				padding: 15px 10px;
				margin: 10px 0;

				input::placeholder {
					color: var(--ex-font-color5);
					background: var(--ex-default-background-color);
				}
			}
		}

		.shouyi {
			padding: 20px 0 0;
			display: flex;
			justify-content: center;

			&>view {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>p:first-child {
					margin-bottom: 12px;
					color: var(--ex-passive-font-color);
				}

				&>p:last-child {
					font-weight: 500;
				}

				&:first-child {
					align-items: flex-start;
				}

				&:last-child {
					align-items: flex-end;
				}
			}
		}
	}

	.content2 {
		padding: 30px 15px;

		&>view {
			&>view {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30px;

				.left {
					color: var(--ex-passive-font-color);
				}

				.right {
					font-weight: 500;
				}
			}
		}

		.btn {
			background-color: var(--ex-div-bgColor1);
			color: var(--ex-font-color);
			text-align: center;
			padding: 14px 0;
			font-size: 16px;
			border-radius: 6px;
			display: flex;
			// text-aligcenter;
			align-items: center;
			justify-content: center;
		}
	}
</style>